<template>
<el-menu :default-active="defaultactive" class="el-menu-vertical-demo menuBox" :class="menuType" ref="menuBox">
  <template v-for="(a, b) in MenuArr">
    <el-submenu v-if="a.children&&a.children.length" v-show="a.enabled" :key="b" :index="`${menuType}${a.id}`">
      <template slot="title">
        <i :class="a.icon"></i>
        <span>{{a.name}}</span>
      </template>
      <el-menu-item v-for="(c,d) in a.children" v-show="c.enabled" :key="d" :index="`${menuType}${c.id}`" style="padding-left: 50px;" @click="goPathName(c)">
        <span slot="title">{{c.name}}</span>
      </el-menu-item>
    </el-submenu>
    <el-menu-item v-else v-show="a.enabled" :key="b" :index="`${menuType}${a.id}`" :route="{name:a.pathName}" @click="goPathName(a)">
      <span slot="title">{{a.name}}</span>
    </el-menu-item>
  </template>
</el-menu>
</template>

<script>
import MenuArr from './menu.js'
import {mapGetters} from 'vuex'
export default {
  components: {
  },
  // provide () {
  //   return {
  //     vMain: this
  //   }
  // },
  props: {
    menuType: String,
  },
  data() {
    return {
      MenuArr,
      defaultactive: '',
      userType:1,
    };
  },
  computed:{
    ...mapGetters('user', ['getUserType']),
  },
  created() {
    this.userType = this.getUserType;
  },
  mounted() {
    if(this.userType === 1){
      this.MenuArr = this.initNewMenu();
    }
    this.openMenu(this.$route.name)
  },
  methods:{
    initNewMenu(){
      let retArr = [];
      for(let i =0;i<this.MenuArr.length;i++){
        if(this.MenuArr[i].id ==3 || this.MenuArr[i].id ==5){
        }else{
          retArr.push(this.MenuArr[i]);
        }
      }
      return retArr;
    },
    openMenu (routename) {
      this.$refs.menuBox.open(`${this.menuType}1`)
      MenuArr.forEach(a => {
        if (a.pathName == routename) { this.defaultactive = a.id } else {
          if (a.children && a.children.length) {
            a.children.forEach(c => {
              if (c.pathName == routename) {
                this.$refs.menuBox.open(`${this.menuType}${a.id}`)
                this.defaultactive = `${this.menuType}${c.id}`
              }
            })
          }
        }
      })
    },
    goPathName (a) {
      this.$router.push({name: a.pathName})
      this.openMenu()
    }
  },
  watch:{
    $route(to,from){
      this.openMenu(this.$route.name);
    }
  },
  beforeDestroy() {
  },
}
</script>

<style lang="less">
.menuBox.leftMenu {
  .el-menu-item {
    padding-right: 0;
  }
}
</style>
